<template>
	<view class="index-box">
		<view class="tab-list">
			<view :class="['tab-item', tabActState === item.type ? 'tab-item-act' : '']" v-for="(item, index) in tabList" :key="index" @click="tabChange(item.type)">
				{{ item.name }}
			</view>
		</view>
		<view class="h-10-f3"></view>
		<view class="data-list">
			<view class="data-item" v-for="(item, index) in dataList" :key="index">
				<view class="data-number">订单号：{{ item.order_no }}</view>
				<view class="data-content">
					<view class="data-title u-line-2">{{ typeObj[item.type] }}</view>
					<view class="data-cell" v-if="userId <= 0">
						<text class="data-user">用户：{{ item.nickname }}</text>
					</view>
					<view class="data-cell">
						金额：
						<text class="num">{{ item.total_amount || 0}}</text>
					</view>
					<view class="data-cell">下单时间：{{ item.date_creation | formTime() }}</view>
				</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
	</view>
</template>

<script>
import { pagingMixin } from '@/mixins/pagingMixin.js';
import { formatDate } from '@/utils/moment/index.js';
export default {
	mixins: [pagingMixin],
	data() {
		return {
			tabList: [{ name: '已支付', type: 1 }, { name: '待支付', type: 0 }],
			tabActState: 1,
			userId:0,
			typeObj:{
				1:'产品订单',
				2:'门票订单',
				3:'酒店订单',
				4:'线路订单',
				5:'视频订单',
				6:'VIP产品订单',
				7:'餐饮订单',
				8:'积分商城订单',
				9:'社区团购订单',
				10:'采购商平台',
				11:'充值订单'
			}
		};
	},
	filters: {
		formTime(time) {
			return formatDate(time,'YYYY-MM-DD HH:mm:ss');
		}
	},
	onLoad: function(options) {
		if(options.user){
			this.userId = Number(options.user)
		}
		this.initPage();
	},
	onReachBottom: function() {
		this.loadMore();
	},
	methods: {
		// 切换tabs
		tabChange(type) {
			this.tabActState = type;
			this.initPage();
		},
		initPage() {
			let params = {
				pay_status: this.tabActState
			}
			if(this.userId){
				params.users_id = this.userId
			}else{
				params.users_id = undefined
			}
			params.distributor_id = this.vuex_user.pk_id
			this._init_data('GetDistributorOrderList', params);
		},
		loadMore() {
			this._load_data();
		}
	}
};
</script>
<style>
page {
	background: #f5f5f5;
}
</style>
<style scoped lang="scss">
.index-box {
	width: 100%;
	padding-top: 108rpx;
}
.tab-list {
	width: 100%;
	padding: 24rpx;
	background-color: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
}
.tab-item {
	flex: 1;
	width: 100%;
	height: 60rpx;
	border: 1rpx solid #e93324;
	border-right: none;
	text-align: center;
	line-height: 58rpx;
	font-size: 30rpx;
	color: #e93324;
}
.tab-item:first-of-type {
	border-radius: 8rpx 0 0 8rpx;
}
.tab-item:last-of-type {
	border-radius: 0 8rpx 8rpx 0;
	border-right: 1rpx solid #e93324;
}
.tab-item-act {
	color: #ffffff;
	background-color: #e93324;
}
.data-list {
	width: 100%;
	padding: 0 24rpx;
}
.data-item {
	width: 100%;
	padding: 0 30rpx;
	border-radius: 16rpx;
	background-color: #ffffff;
	font-size: 26rpx;
	color: #999999;
	margin-top: 20rpx;
}
.data-number {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	border-bottom: 1px solid #f5f5f5;
}
.data-content {
	width: 100%;
	padding: 20rpx 0;
	.data-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	.data-cell {
		line-height: 48rpx;
		.num{
			color: #e93324;
		}
		.data-user {
			display: inline-block;
			max-width: 360rpx;
		}
	}
}
</style>
